<template>
  <div>
    <!-- 3：使用 -->
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-field v-model="value" label="文本" placeholder="请输入用户名" />
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <hr />
    <h3>基本接口调用</h3>
    <button @click="btnClick">调用一个接口</button>
    <h3>实际开发接口汇总调用</h3>
    <button @click="btnClick2">调用一个接口</button>
    <button @click="btnClick3">调用一个接口注册</button>
    <router-view></router-view>
  </div>
</template>
<script>
// import axios from 'axios'
import { toLogin } from '@/api/login'
import { userRegister } from '@/api/xxx'
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    // 基本接口请求
    async btnClick () {
      // const res = await axios({
      //   url: 'http://interview-api-t.itheima.net/h5/user/login',
      //   method: 'post',
      //   data: {
      //     username: 'admin91',
      //     password: '123456'
      //   }
      // })
      // console.log('接口请求返回值', res)
    },
    // 封装抽离方式的接口请求方式
    async btnClick2 () {
      const res = await toLogin({
        username: 'admin91',
        password: '123456'
      })
      console.log('接口请求', res)
    },
    async btnClick3 () {
      const res = await userRegister({
        username: 'xxx001',
        password: '123456'
      })
      console.log('注册返回值', res)
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  width: 100vw;
  height: 100px;
  background-color: #f00;
}
// 手动计算  375设计稿，100px是多少vw
.box2 {
  width: 100vw * (100 / 375);
  height: 100px;
  background-color: #00f;
}
// 插件转换
.box3 {
  width: 100px;
  height: 50px;
  background-color: #0f0;
}
</style>
